<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->




<div class="content" role="main">

  <!-- Highlight Card -->
  <div class="card highlight-card card-small">

    <svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
      <title>前端在线</title>
      <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
        <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)"
          fill="#dd0031" />
        <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
          <path id="Path_33" data-name="Path 33"
            d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z"
            transform="translate(0.371 3.363)" fill="#fff" />
          <path id="Path_34" data-name="Path 34"
            d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z"
            transform="translate(0 0.005)" fill="#fff" />
        </g>
      </g>
    </svg>

    <span>{{ title }} 关于我们~!</span>

    <svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632"
      viewBox="0 0 516.119 1083.632">
      <title>前端在线</title>
      <path id="Path_40" data-name="Path 40"
        d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z"
        transform="translate(-147.025 -140.939)" fill="#f5f5f5" />
    </svg>

  </div>

  <!-- Resources -->
  <h2>前端在线</h2>
  <p>一些我们的主要资源:</p>

  <div class="card-container">
    <a class="card" target="_blank" rel="noopener" [routerLink]='["/agr"]'>
      <!-- <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z" />
      </svg> -->
      <svg class="material-icons" t="1670334471421" class="icon" viewBox="0 0 1030 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="2726" width="24" height="24">
        <path
          d="M885.76 1008.64H153.6c-14.336 0-25.6-11.264-25.6-25.6V40.96c0-14.336 11.264-25.6 25.6-25.6h732.16c14.336 0 25.6 11.264 25.6 25.6v942.08c0 14.336-11.264 25.6-25.6 25.6zM179.2 957.44h680.96V66.56H179.2v890.88z"
          p-id="2727"></path>
        <path
          d="M640 424.96c-4.096 0-8.704-1.024-12.8-3.072L522.24 361.984 417.28 421.888c-7.68 4.608-17.408 4.608-25.6 0-8.192-5.12-12.8-13.312-12.8-22.528V40.96c0-14.336 11.264-25.6 25.6-25.6h235.52c14.336 0 25.6 11.264 25.6 25.6v358.4c0 9.216-4.608 17.408-12.8 22.016-4.096 2.56-8.192 3.584-12.8 3.584z m-117.76-117.76c4.096 0 8.704 1.024 12.8 3.072l79.36 45.056V66.56H430.08v288.768l79.36-45.056c4.096-2.048 8.704-3.072 12.8-3.072zM721.92 629.76H312.32c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h409.6c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM517.12 762.88H312.32c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h204.8c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM704 901.12c-55.296 0-99.84-44.544-99.84-99.84s44.544-99.84 99.84-99.84 99.84 44.544 99.84 99.84-44.544 99.84-99.84 99.84z m0-148.48c-26.624 0-48.64 22.016-48.64 48.64s22.016 48.64 48.64 48.64 48.64-22.016 48.64-48.64-22.016-48.64-48.64-48.64z"
          p-id="2728"></path>
      </svg>
      <span>服务协议</span>

      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
      </svg>
    </a>

    <a class="card" target="_blank" rel="noopener" [routerLink]="['/test']">
      <!-- <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" />
      </svg> -->
      <svg t="1670334727157" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="3034" width="24" height="24">
        <path d="M835.07 158.17h-46.15v92.3H896.6V219.7c0-33.98-27.55-61.53-61.53-61.53z" fill="#5F68FD" p-id="3035">
        </path>
        <path
          d="M450.46 327.39H342.78c-8.5 0-15.38-6.88-15.38-15.38s6.89-15.38 15.38-15.38h107.69c8.5 0 15.38 6.88 15.38 15.38s-6.89 15.38-15.39 15.38zM665.84 435.08H342.78c-8.5 0-15.38-6.88-15.38-15.38s6.89-15.38 15.38-15.38h323.07c8.5 0 15.38 6.88 15.38 15.38s-6.89 15.38-15.39 15.38zM527.38 542.77h-184.6c-8.5 0-15.38-6.88-15.38-15.38S334.28 512 342.78 512h184.61c8.5 0 15.38 6.88 15.38 15.38s-6.89 15.39-15.39 15.39zM619.69 650.46H342.78c-8.5 0-15.38-6.88-15.38-15.38s6.89-15.38 15.38-15.38h276.91c8.5 0 15.38 6.88 15.38 15.38s-6.89 15.38-15.38 15.38z"
          fill="#1D2088" p-id="3036"></path>
        <path d="M265.86 312.01m-23.08 0a23.08 23.08 0 1 0 46.16 0 23.08 23.08 0 1 0-46.16 0Z" fill="#5F68FD"
          p-id="3037"></path>
        <path d="M265.86 419.7m-23.08 0a23.08 23.08 0 1 0 46.16 0 23.08 23.08 0 1 0-46.16 0Z" fill="#5F68FD"
          p-id="3038"></path>
        <path d="M263.569002 550.356396a23.08 23.08 0 1 0 4.54692-45.935511 23.08 23.08 0 1 0-4.54692 45.935511Z"
          fill="#5F68FD" p-id="3039"></path>
        <path d="M264.236918 658.094314a23.08 23.08 0 1 0 3.272999-46.043817 23.08 23.08 0 1 0-3.272999 46.043817Z"
          fill="#5F68FD" p-id="3040"></path>
        <path
          d="M808.14 727.38c-2.95 0-5.9-1.13-8.16-3.38a11.534 11.534 0 0 1 0-16.32l23.54-23.54v-64.45c0-6.37 5.17-11.54 11.54-11.54s11.54 5.17 11.54 11.54v69.23c0 3.06-1.22 5.99-3.38 8.16L816.3 724a11.5 11.5 0 0 1-8.16 3.38z"
          fill="#1D2088" p-id="3041"></path>
        <path
          d="M635.07 804.3v-30.77H81.25v30.77c0 33.98 27.55 61.54 61.54 61.54h553.83c-34-0.01-61.55-27.56-61.55-61.54z"
          fill="#4AFFFE" p-id="3042"></path>
        <path
          d="M835.07 558.15c-10.64 0-20.91 1.5-30.77 4.05V265.86h92.3c8.5 0 15.38-6.88 15.38-15.38V219.7c0-42.41-34.51-76.92-76.92-76.92H265.86c-59.38 0-107.69 48.32-107.69 107.69v507.67H81.25c-8.5 0-15.38 6.88-15.38 15.38v30.77c0 42.41 34.51 76.92 76.92 76.92h553.83c50.32 0 92.82-34.6 104.42-81.81 10.83 3.12 22.22 4.89 34.04 4.89 67.86 0 123.07-55.21 123.07-123.07s-55.22-123.07-123.08-123.07z m46.15-338.45v15.38H804.3v-61.54h30.77c25.45 0.01 46.15 20.71 46.15 46.16zM142.78 850.45c-25.45 0-46.15-20.7-46.15-46.15v-15.38h523.06v15.38c0 4.89 0.57 9.63 1.44 14.26 0.28 1.48 0.73 2.87 1.09 4.32 0.78 3.13 1.69 6.19 2.85 9.16 0.6 1.55 1.27 3.05 1.97 4.55 1.3 2.78 2.76 5.45 4.37 8.04 0.83 1.33 1.61 2.67 2.51 3.95 0.43 0.6 0.75 1.29 1.19 1.88l-492.33-0.01z m629.47-63.52c-6.35 36.3-37.93 63.52-75.64 63.52-25.45 0-46.15-20.7-46.15-46.15v-30.77c0-8.5-6.89-15.38-15.38-15.38H188.93V250.47c0-42.41 34.51-76.92 76.92-76.92h507.67v401.22c-0.2 0.12-0.37 0.27-0.58 0.39-4.25 2.5-8.33 5.25-12.23 8.22-0.34 0.26-0.69 0.5-1.02 0.77-8.3 6.46-15.73 13.95-22.15 22.29l-0.11 0.14c-9.45 12.33-16.61 26.47-20.87 41.83-0.19 0.66-0.34 1.33-0.51 1.99-1.06 4.09-1.91 8.26-2.55 12.51-0.17 1.09-0.36 2.18-0.5 3.28-0.61 4.94-1.02 9.94-1.02 15.05 0 5.06 0.4 10.02 1 14.92 0.14 1.09 0.33 2.15 0.49 3.23 0.62 4.18 1.45 8.29 2.48 12.33 0.18 0.68 0.34 1.37 0.53 2.05 4.17 15.17 11.16 29.14 20.39 41.38 0.05 0.06 0.09 0.12 0.13 0.18 6.35 8.38 13.7 15.94 21.95 22.46 0.1 0.08 0.2 0.15 0.3 0.23 3.88 3.05 7.97 5.83 12.2 8.41 0.3 0.13 0.53 0.34 0.8 0.5z m62.82-13.4c-14.27 0-27.75-3.35-39.82-9.16-27.48-13.18-46.49-39.25-51.25-68.76-0.13-0.8-0.26-1.59-0.37-2.4-0.53-3.95-0.87-7.95-0.87-11.99 0-4.05 0.34-8.05 0.87-12.01 0.11-0.81 0.24-1.61 0.37-2.42 3.39-21.01 13.97-40.28 29.75-54.38l0.01-0.01a92.212 92.212 0 0 1 21.65-14.41c12.03-5.76 25.45-9.08 39.66-9.08 50.9 0 92.3 41.4 92.3 92.3s-41.41 92.32-92.3 92.32z"
          fill="#1D2088" p-id="3043"></path>
      </svg>
      <span>入行前端测验</span>
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
      </svg>
    </a>

    <a class="card" target="_blank" rel="noopener" [routerLink]="['/lib']">
      <!-- <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453"
        viewBox="0 0 179.2 192.7">
        <path fill="#ffa726" d="M89.4 0 0 32l13.5 118.4 75.9 42.3 76-42.3L179.2 32 89.4 0z" />
        <path fill="#fb8c00" d="M89.4 0v192.7l76-42.3L179.2 32 89.4 0z" />
        <path fill="#ffe0b2" d="m102.9 146.3-63.3-30.5 36.3-22.4 63.7 30.6-36.7 22.3z" />
        <path fill="#fff3e0" d="M102.9 122.8 39.6 92.2l36.3-22.3 63.7 30.6-36.7 22.3z" />
        <path fill="#fff" d="M102.9 99.3 39.6 68.7l36.3-22.4 63.7 30.6-36.7 22.4z" />
      </svg> -->
      <svg t="1670336061150" class="material-icons" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="4030" width="24" height="24">
        <path
          d="M256 995.84H10.752V101.376H256v894.464zM214.016 146.944H53.248v82.432h160.768V146.944z m0 0M344.576 1.024h228.352v1021.952H344.576V1.024z m194.56 39.424H383.488v79.872h155.648V40.448z m0 0"
          p-id="4031" fill="#707070"></path>
        <path
          d="M1012.736 925.696l-204.8 66.56-243.2-747.008 204.8-66.56 243.2 747.008zM747.008 227.84l-134.656 44.032 22.528 68.608 134.656-44.032-22.528-68.608z m0 0"
          p-id="4032" fill="#707070"></path>
      </svg>
      <span>精品资源</span>
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
      </svg>
    </a>

    <a class="card" target="_blank" rel="noopener" href="https://websong.wang">
      <!--  <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path
          d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z" />
      </svg> -->
      <svg class="material-icons" t="1670336189714" class="icon" viewBox="0 0 1074 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="4612" width="24" height="24">
        <path
          d="M674.891284 27.31819c187.491506 29.575248 456.626263 262.052263 389.148 635.634343-49.188307 272.4036-347.120016 395.374368-544.8072 352.801577-614.85384-132.31032-20.780503-33.700217 189.359417-308.750024C939.745413 404.71392 674.891284 27.31819 674.891284 27.31819z"
          fill="#FFD6BB" p-id="4613"></path>
        <path
          d="M514.406649 1020.890863a654.858254 654.858254 0 0 1-247.653787-48.487841c-108.027485-45.374657-183.444367-118.223162-217.92288-210.13992a23.34888 23.34888 0 0 1 43.740235-16.422045c69.034855 183.833515 311.551889 236.601984 457.715878 227.028943 232.554845-15.021113 386.034816-157.371451 432.109939-400.90027 23.893687-126.161782 3.035354-236.991132-62.26368-329.452696C837.555148 124.52736 703.143429 65.999501 604.922474 50.277922a23.34888 23.34888 0 0 1 7.393812-46.152953c107.638337 17.200342 255.125429 81.876739 346.34172 211.696512 72.459358 103.12422 95.886067 225.70584 69.579662 365.020824s-84.912094 248.198594-174.026985 324.082454C774.824491 972.403022 670.766316 1011.7848 553.24362 1019.56776c-12.764054 0.933955-25.761598 1.323103-38.836971 1.323103z"
          fill="#FF761A" p-id="4614"></path>
        <path
          d="M404.744743 945.70747a506.826355 506.826355 0 0 1-164.998752-28.641293c-122.114642-41.872325-201.189516-133.789082-228.896854-265.788084a532.510123 532.510123 0 0 1-4.981094-185.779255C59.181319 216.521947 249.085543 44.285042 513.706183 3.89148a326.88432 326.88432 0 0 1 100.322354 0c93.39552 14.787624 175.505748 71.758891 230.531275 160.562465 68.645707 110.751521 84.989923 254.89194 43.895895 385.567838C840.590503 702.48997 734.430928 832.77672 604.844644 898.075754A441.371662 441.371662 0 0 1 404.744743 945.70747zM564.995889 46.69776a292.794955 292.794955 0 0 0-44.051553 3.424502C272.434423 87.947448 101.209303 242.672693 51.631848 474.76056a494.684938 494.684938 0 0 0 5.214583 168.345425c24.671983 115.888274 91.060632 193.173067 197.842843 229.830809C371.667163 913.096867 482.574343 907.570966 583.752823 856.1256c116.7444-58.917007 216.521947-181.732116 260.184352-320.424463 37.124719-117.911844 22.570584-247.575958-38.9148-346.964357C757.312831 111.918965 686.954872 62.26368 607.101703 49.966603A269.212586 269.212586 0 0 0 564.995889 46.69776z"
          fill="#FF761A" p-id="4615"></path>
        <path
          d="M403.110321 806.003338c-98.843592 0-122.892938-51.056218-152.001209-121.958984-61.096236-29.10827-78.919214-123.671234-69.112684-204.380529C172.812535 392.027695 196.472733 317.700427 250.642135 264.62064a287.96952 287.96952 0 0 1 217.066754-77.8296c77.129134-24.282835 138.925836-16.655534 238.002917 86.157367 116.7444 120.869369 24.905472 300.733574-5.136754 359.806241-45.608146 89.58187-213.097445 171.22512-290.226578 173.09303h-7.238153z m44.518531-573.526323c-45.063338 0-114.253853 16.110727-164.220456 65.299035-44.75202 43.973724-63.119806 104.369494-54.48072 179.475057a23.34888 23.34888 0 0 1 0 5.603731c-8.872574 68.645707 6.459857 147.87624 47.631716 161.107272a23.34888 23.34888 0 0 1 14.398476 13.386692l0.544807 1.323103c30.275714 74.482927 41.716666 102.423754 118.067503 100.555843 63.353294-1.556592 213.564422-76.506497 249.755186-147.87624 71.681062-140.871576 76.039519-241.27176 13.153203-306.259476-93.39552-96.586534-137.524903-91.52761-194.574-72.770676A23.34888 23.34888 0 0 1 467.008423 233.4888a153.479971 153.479971 0 0 0-19.379571-1.011785z"
          fill="#FF761A" p-id="4616"></path>
        <path
          d="M205.500967 503.168364a23.34888 23.34888 0 0 1-15.56592-40.93837c5.214583-4.514117 118.067503-101.17848 201.423005-53.858083a486.35717 486.35717 0 0 1 74.015949-80.242317c74.794246-63.898102 154.413926-85.067753 230.297787-61.174066a23.34888 23.34888 0 1 1-13.77584 44.362872c-146.786626-46.152953-263.842344 140.560258-264.62064 142.428168a23.34888 23.34888 0 0 1-36.268593 4.436287c-52.45715-51.601025-158.772384 38.214334-159.861999 38.9148a23.34888 23.34888 0 0 1-15.643749 6.070709z"
          fill="#FF761A" p-id="4617"></path>
        <path
          d="M269.00992 689.492426a23.34888 23.34888 0 0 1-23.34888-20.547014c-13.931498-114.176023 54.48072-173.637838 109.428418-221.425212 9.183893-7.78296 17.822978-15.56592 25.683768-22.959732a23.34888 23.34888 0 0 1 38.369993 10.195678c18.756934 62.26368 174.104815 134.25606 267.655994 165.154411a23.34888 23.34888 0 0 1-14.631965 44.362872c-24.438494-7.78296-220.179938-74.872075-282.365788-165.154411l-4.124969 3.580161c-51.445366 44.67419-104.680812 90.904973-93.39552 180.486843a23.34888 23.34888 0 0 1-20.391355 25.995086z"
          fill="#FF761A" p-id="4618"></path>
        <path
          d="M396.961783 464.95403a23.34888 23.34888 0 0 1-20.624844-12.297076C312.438837 333.110688 401.086752 229.363831 456.890575 191.227327a23.34888 23.34888 0 0 1 26.384234 38.525652c-5.136754 3.580162-125.772634 88.570085-65.688182 200.878198A23.34888 23.34888 0 0 1 396.961783 464.95403z"
          fill="#FF761A" p-id="4619"></path>
      </svg>
      <span>我的博客</span>
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
      </svg>
    </a>

    <a class="card" target="_blank" rel="noopener" href="http://websong.gitee.io/resources/love">
      <!-- <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
        viewBox="0 0 24 24" width="24px" fill="#000000">
        <g>
          <rect fill="none" height="24" width="24" />
        </g>
        <g>
          <g>
            <path
              d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z" />
            <polygon
              points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44" />
          </g>
        </g>
      </svg> -->
      <svg t="1670336549998" class="material-icons" viewBox="0 0 1267 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="5669" width="24" height="24">
        <path
          d="M1095.66103702 123.37152H161.44535702c-20.10984297 0-36.40888889 16.31118222-36.40888889 36.40888889v196.62013629H1132.0699259V159.78040889c0-20.09770667-16.31118222-36.40888889-36.40888888-36.40888889zM705.00579553 278.98311111c-21.45697185 0-38.86042075-17.40344889-38.86042073-38.87255703 0-21.45697185 17.40344889-38.86042075 38.86042073-38.86042075 21.46910815 0 38.86042075 17.40344889 38.86042075 38.86042075 0 21.46910815-17.39131259 38.87255703-38.86042075 38.87255703z m155.3324563 0c-21.45697185 0-38.86042075-17.40344889-38.86042073-38.87255703 0-21.45697185 17.40344889-38.86042075 38.86042073-38.86042075 21.46910815 0 38.86042075 17.40344889 38.86042074 38.86042075 0 21.46910815-17.39131259 38.87255703-38.86042074 38.87255703z m155.3324563 0c-21.45697185 0-38.86042075-17.40344889-38.86042073-38.87255703 0-21.45697185 17.40344889-38.86042075 38.86042073-38.86042075 21.46910815 0 38.86042075 17.40344889 38.86042074 38.86042075 0 21.46910815-17.39131259 38.87255703-38.86042074 38.87255703zM125.03646813 864.52299852c0 20.10984297 16.29904592 36.40888889 36.40888889 36.40888889h934.20354371c20.10984297 0 36.40888889-16.29904592 36.40888888-36.40888889V396.40177778H125.03646813v468.12122074z m771.75921777-118.02548149l119.20270223 0.09709038c20.09770667 0.02427259 36.3846163 16.33545482 36.37248 36.43316148s-16.29904592 36.3846163-36.3846163 36.38461629h-0.04854518l-119.20270222-0.09709036c-20.10984297-0.02427259-36.39675259-16.33545482-36.3846163-36.43316149 0.02427259-20.10984297 16.33545482-36.40888889 36.44529777-36.3846163z m-162.85696-129.61564444l-77.45384295-76.67712c-14.28442075-14.13878518-14.4057837-37.19774815-0.25486222-51.48216889a36.28752592 36.28752592 0 0 1 25.8745837-10.8013037c9.25999408 0 18.50785185 3.50738963 25.60758518 10.53430518l129.50641779 128.20783407c14.34510222 14.19946667 14.39364741 37.3676563 0.10922666 51.63994075l-129.61564445 129.4214637c-14.22373925 14.19946667-37.27056592 14.18733037-51.48216888-0.03640888-7.09973333-7.11186963-10.64353185-16.42040889-10.64353186-25.72894815 0-9.32067555 3.55593482-18.65348741 10.67994074-25.76535704l77.78152296-77.6722963c14.28442075-14.27228445 14.23587555-37.42833778-0.10922667-51.63994074z m-208.6714785 0l-77.45384297-76.67712c-14.28442075-14.13878518-14.4057837-37.19774815-0.25486223-51.48216889 7.11186963-7.1968237 16.49322667-10.8013037 25.8745837-10.8013037 9.24785778 0 18.50785185 3.50738963 25.6075852 10.53430518l129.50641777 128.20783407c14.34510222 14.19946667 14.39364741 37.3676563 0.10922666 51.63994075L499.0407111 797.7248237c-14.22373925 14.19946667-37.28270222 14.18733037-51.4821689-0.03640888a36.31058489 36.31058489 0 0 1-10.65566814-25.72894815 36.28752592 36.28752592 0 0 1 10.69207704-25.76535704l77.78152296-77.6722963c14.28442075-14.27228445 14.23587555-37.42833778-0.10922666-51.63994074z m-208.67147853 0l-77.45384297-76.67712c-14.28442075-14.13878518-14.4057837-37.19774815-0.25486222-51.48216889 7.11186963-7.1968237 16.49322667-10.8013037 25.87458372-10.8013037 9.24785778 0 18.50785185 3.50738963 25.60758517 10.53430518l129.50641778 128.20783407c14.34510222 14.19946667 14.39364741 37.3676563 0.10922667 51.63994075l-129.61564445 129.4214637c-14.22373925 14.19946667-37.28270222 14.18733037-51.48216889-0.03640888a36.31058489 36.31058489 0 0 1-10.65566815-25.72894815 36.28752592 36.28752592 0 0 1 10.69207704-25.76535704l77.78152296-77.6722963c14.28442075-14.26014815 14.23587555-37.42833778-0.10922666-51.63994074z"
          fill="#5473E8" p-id="5670"></path>
      </svg>
      <span>在线小dome</span>
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
      </svg>
    </a>

  </div>

  <!-- 精品宝贝 -->
  <h2>精品宝贝</h2>
  <p>这里或许会有一款适合你</p>

  <input type="hidden" #selection>

  <div class="card-container">
    <button dPopover bsStyle="common" (click)="copy(target)" [popType]="'success'" [content]="'您已复制地址，打开淘宝可以直达宝贝!'"
      [position]="['top']" [controlled]="true" [appendToBody]="true" class="card card-small"
      (click)="selection.value = 'component'" tabindex="0">
      <!-- <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
      </svg> -->
      <svg t="1670336867986" class="material-icons" viewBox="0 0 1138 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="8484" width="24" height="24">
        <path
          d="M57.242236 626.030169l397.969831 0 0 397.969831-397.969831 0 0-397.969831zM683.272405 626.030169l397.969831 0 0 397.969831-397.969831 0 0-397.969831zM0 284.393966l455.212067 0 0 284.393966-455.212067 0 0-284.393966zM1137.575865 284.393966l0 284.393966-454.303461 0 0-284.393966 454.303461 0zM512.454303 284.393966l113.575865 0 0 739.606034-113.575865 0 0-739.606034zM683.272405 228.060337l-228.060337 0 0-170.818101 228.060337 0 0 170.818101zM1024 228.060337l-284.393966 0 111.758651-228.060337 172.635315 0 0 228.060337zM398.878438 228.060337l-284.393966 0 0-228.060337 169.909494 0z"
          p-id="8485"></path>
      </svg>
      <span>1对1服务[包月]</span>
    </button>

    <button dPopover bsStyle="common" (click)="copy(target)" [popType]="'success'" [content]="'您已复制地址，打开淘宝可以直达宝贝!'"
      [position]="['top']" [controlled]="true" [appendToBody]="true" class="card card-small"
      (click)="selection.value = 'material'" tabindex="0">
      <svg t="1670336867986" class="material-icons" viewBox="0 0 1138 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="8484" width="24" height="24">
        <path
          d="M57.242236 626.030169l397.969831 0 0 397.969831-397.969831 0 0-397.969831zM683.272405 626.030169l397.969831 0 0 397.969831-397.969831 0 0-397.969831zM0 284.393966l455.212067 0 0 284.393966-455.212067 0 0-284.393966zM1137.575865 284.393966l0 284.393966-454.303461 0 0-284.393966 454.303461 0zM512.454303 284.393966l113.575865 0 0 739.606034-113.575865 0 0-739.606034zM683.272405 228.060337l-228.060337 0 0-170.818101 228.060337 0 0 170.818101zM1024 228.060337l-284.393966 0 111.758651-228.060337 172.635315 0 0 228.060337zM398.878438 228.060337l-284.393966 0 0-228.060337 169.909494 0z"
          p-id="8485"></path>
      </svg>
      <span>综合：bug,简历,咨询</span>
    </button>

    <button dPopover bsStyle="common" (click)="copy(target)" [popType]="'success'" [content]="'您已复制地址，打开淘宝可以直达宝贝!'"
      [position]="['top']" [controlled]="true" [appendToBody]="true" class="card card-small"
      (click)="selection.value = 'pwa'" tabindex="0">
      <svg t="1670336867986" class="material-icons" viewBox="0 0 1138 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="8484" width="24" height="24">
        <path
          d="M57.242236 626.030169l397.969831 0 0 397.969831-397.969831 0 0-397.969831zM683.272405 626.030169l397.969831 0 0 397.969831-397.969831 0 0-397.969831zM0 284.393966l455.212067 0 0 284.393966-455.212067 0 0-284.393966zM1137.575865 284.393966l0 284.393966-454.303461 0 0-284.393966 454.303461 0zM512.454303 284.393966l113.575865 0 0 739.606034-113.575865 0 0-739.606034zM683.272405 228.060337l-228.060337 0 0-170.818101 228.060337 0 0 170.818101zM1024 228.060337l-284.393966 0 111.758651-228.060337 172.635315 0 0 228.060337zM398.878438 228.060337l-284.393966 0 0-228.060337 169.909494 0z"
          p-id="8485"></path>
      </svg>
      <span>框架教学课程-线授</span>
    </button>

    <button dPopover bsStyle="common" (click)="copy(target)" [popType]="'success'" [content]="'您已复制地址，打开淘宝可以直达宝贝!'"
      [position]="['top']" [controlled]="true" [appendToBody]="true" class="card card-small"
      (click)="selection.value = 'dependency'" tabindex="0">
      <svg t="1670336867986" class="material-icons" viewBox="0 0 1138 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="8484" width="24" height="24">
        <path
          d="M57.242236 626.030169l397.969831 0 0 397.969831-397.969831 0 0-397.969831zM683.272405 626.030169l397.969831 0 0 397.969831-397.969831 0 0-397.969831zM0 284.393966l455.212067 0 0 284.393966-455.212067 0 0-284.393966zM1137.575865 284.393966l0 284.393966-454.303461 0 0-284.393966 454.303461 0zM512.454303 284.393966l113.575865 0 0 739.606034-113.575865 0 0-739.606034zM683.272405 228.060337l-228.060337 0 0-170.818101 228.060337 0 0 170.818101zM1024 228.060337l-284.393966 0 111.758651-228.060337 172.635315 0 0 228.060337zM398.878438 228.060337l-284.393966 0 0-228.060337 169.909494 0z"
          p-id="8485"></path>
      </svg>
      <span>前端入门教学课程-授</span>
    </button>

    <button dPopover bsStyle="common" (click)="copy(target)" [popType]="'success'" [content]="'您已复制地址，打开淘宝可以直达宝贝!'"
      [position]="['top']" [controlled]="true" [appendToBody]="true" class="card card-small"
      (click)="selection.value = 'test'" tabindex="0">
      <svg t="1670336867986" class="material-icons" viewBox="0 0 1138 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="8484" width="24" height="24">
        <path
          d="M57.242236 626.030169l397.969831 0 0 397.969831-397.969831 0 0-397.969831zM683.272405 626.030169l397.969831 0 0 397.969831-397.969831 0 0-397.969831zM0 284.393966l455.212067 0 0 284.393966-455.212067 0 0-284.393966zM1137.575865 284.393966l0 284.393966-454.303461 0 0-284.393966 454.303461 0zM512.454303 284.393966l113.575865 0 0 739.606034-113.575865 0 0-739.606034zM683.272405 228.060337l-228.060337 0 0-170.818101 228.060337 0 0 170.818101zM1024 228.060337l-284.393966 0 111.758651-228.060337 172.635315 0 0 228.060337zM398.878438 228.060337l-284.393966 0 0-228.060337 169.909494 0z"
          p-id="8485"></path>
      </svg>
      <span>前端职业实测-在线</span>
    </button>

    <button dPopover bsStyle="common" (click)="copy(target)" [popType]="'success'" [content]="'您已复制地址，打开淘宝可以直达宝贝!'"
      [position]="['top']" [controlled]="true" [appendToBody]="true" class="card card-small"
      (click)="selection.value = 'build'" tabindex="0">
      <svg t="1670336867986" class="material-icons" viewBox="0 0 1138 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="8484" width="24" height="24">
        <path
          d="M57.242236 626.030169l397.969831 0 0 397.969831-397.969831 0 0-397.969831zM683.272405 626.030169l397.969831 0 0 397.969831-397.969831 0 0-397.969831zM0 284.393966l455.212067 0 0 284.393966-455.212067 0 0-284.393966zM1137.575865 284.393966l0 284.393966-454.303461 0 0-284.393966 454.303461 0zM512.454303 284.393966l113.575865 0 0 739.606034-113.575865 0 0-739.606034zM683.272405 228.060337l-228.060337 0 0-170.818101 228.060337 0 0 170.818101zM1024 228.060337l-284.393966 0 111.758651-228.060337 172.635315 0 0 228.060337zM398.878438 228.060337l-284.393966 0 0-228.060337 169.909494 0z"
          p-id="8485"></path>
      </svg>
      <span>代开发页面，作业</span>
    </button>
  </div>

  <!-- Terminal -->
  <div class="terminal" #target [ngSwitch]="selection.value">
    <pre
      *ngSwitchDefault>https://item.taobao.com/item.htm?spm=a1z10.1-c.w137644-24495995956.43.1adb284coijStH&id=688567183384</pre>
    <pre
      *ngSwitchCase="'material'">https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-24495995961.2.1adb284coijStH&id=685459095162</pre>
    <pre
      *ngSwitchCase="'pwa'">https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-24495995961.18.1adb284coijStH&id=693231404236</pre>
    <pre
      *ngSwitchCase="'dependency'">https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-24495995961.24.1adb284coijStH&id=694069957447</pre>
    <pre
      *ngSwitchCase="'test'">https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-24495995961.22.1adb284coijStH&id=693590899901</pre>
    <pre
      *ngSwitchCase="'build'">https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-24495995961.20.1adb284coijStH&id=693519220553</pre>
  </div>

  <!-- Links -->
  <div class="card-container">
    <a class="circle-link" title="我的gitee" href="https://gitee.com/websong" target="_blank" rel="noopener">
      <svg t="1670395627483" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="2959" width="24" height="24">
        <title>我的gitee</title>
        <path
          d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"
          fill="#C71D23" p-id="2960"></path>
      </svg>
    </a>

    <a class="circle-link" title="我的github" href="https://github.com/websongno1" target="_blank" rel="noopener">
      <svg t="1670395564432" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="2680" width="24" height="24">
        <title>我的github</title>
        <path
          d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
          p-id="2681"></path>
      </svg>
    </a>
  </div>

  <!-- Footer -->
  <footer>
    项目使用 Angular，如果喜欢?&nbsp;
    <a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
      <div class="github-star-badge">
        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path d="M0 0h24v24H0z" fill="none" />
          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
        </svg>
        Star
      </div>
    </a>
    <a href="https://github.com/angular/angular" target="_blank" rel="noopener">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2" />
        <path d="M0 0h24v24H0z" fill="none" />
      </svg>
    </a>
  </footer>

  <svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
    <title>Gray Clouds Background</title>
    <path id="Path_39" data-name="Path 39"
      d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z"
      transform="translate(142.69 -634.312)" fill="#eee" />
  </svg>
  <app-com-backtop></app-com-backtop>
</div>

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->